<template>
  <div>
    <div class="finance_money">
      <Row :gutter="10">
        <div class="live_wrapper clearfix"
             style="margin-top:30px;">
          <p class="admin_title"
             style="float: left;">
            账单汇总
          </p>
          <div style="float:right;margin-top: 15px;">
            <DatePicker type="daterange"
                        v-model="created_at_hz"
                        @on-change="search"
                        placement="bottom-end"
                        placeholder="选择下单时间"
                        style="width: 200px; margin-right: 10px;"></DatePicker>
          </div>
        </div>
      </Row>
      <Row :gutter="10">
        <div class="clearfix fm">
          <div class="fm_wrap">
            <p class="fm_text">总收入 (元)</p>
            <p class="fm_text">{{money_all}}</p>
            <div class="finance_tips_wrapper"
                style="left: 135px;">
              <Icon type="md-alert"
                    color="#d3dae5"
                    style="cursor: pointer;"
                    size="19" />
              <p class="finance_tips">系统已付款订单总金额</p>
            </div>
          </div>
          <div class="fm_wrap">
            <p class="fm_text">待结算金额 (元)</p>
            <p class="fm_text">{{money_djs}}</p>
            <div class="finance_tips_wrapper"
                style="left: 171px;">
              <Icon type="md-alert"
                    color="#d3dae5"
                    style="cursor: pointer;"
                    size="19" />
              <p class="finance_tips">系统已付款但是还未售后结束的订单总金额</p>
            </div>
          </div>
          <div class="fm_wrap">
            <p class="fm_text">已结算金额 (元)</p>
            <p class="fm_text">{{money_yjs}}</p>
            <div class="finance_tips_wrapper" style="left: 171px;">
              <Icon type="md-alert"
                    color="#d3dae5"
                    style="cursor: pointer;"
                    size="19" />
              <p class="finance_tips">系统已付款并且订单已完成的订单总金额</p>
            </div>
          </div>
          <div class="fm_wrap">
            <p class="fm_text">退款金额 (元)</p>
            <p class="fm_text">{{money_tk}}</p>
            <div class="finance_tips_wrapper" style="left: 155px;">
              <Icon type="md-alert"
                    color="#d3dae5"
                    style="cursor: pointer;"
                    size="19" />
              <p class="finance_tips">订单退款成功总金额</p>
            </div>
          </div>
        </div>
      </Row>
      <Row :gutter="10">
        <div class="live_wrapper clearfix"
             style="margin-top:30px;">
          <p class="admin_title"
             style="float: left;">
            账单明细
          </p>
          <div style="float:right;margin-top: 15px;">
            <DatePicker type="daterange"
                        v-model="created_at"
                        @on-change="search"
                        placement="bottom-end"
                        placeholder="选择下单时间"
                        style="width: 200px; margin-right: 10px;"></DatePicker>
            <Button type="primary"
                    @click.stop="exportData()"
                    style="width: 90px;height: 32px;font-size: 14px; float: right; margin-left: 10px">导出</Button>
          </div>
        </div>
      </Row>
      <Row :gutter="10">
        <Row class="margin-top-10 table_pattern table_pattern2">
          <Table style="width: calc(100vw - 256px - 36px - 32px)"
                 :loading="loading"
                 :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"
                show-sizer
                @on-page-size-change="changePageSize"
                :page-size-opts="[20, 50, 100,200]"></Page>
        </Row>
      </Row>
      <Modal v-model="show_remark"
             title="编辑流水说明"
             width="600px"
             :mask-closable="false"
             class="public_modal_header edit_modal">
        <div style="width:70%;margin: 0 auto;padding-top:80px;padding-bottom: 80px;">
          <Input v-model="remark"
                 type="textarea"
                 :rows="5"
                 placeholder="编辑相关说明" />
        </div>
        <div class="btns">
          <Button @click.stop="show_remark = false">取消</Button>
          <Button @click.stop="submitRemark"
                  type="primary"
                  style="margin-left:15px;">确定</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import Time from '@/tool/Time'
import VueNeditorWrap from 'vue-neditor-wrap'
import config from '@/config'
import { financeInfo, orderRecord, editRemark, addCashOut, getLastCashInfo, getAddress } from '@/api/main'
export default {
  data () {
    return {
      money_all: '0.00',
      money_djs: '0.00',
      money_yjs: '0.00',
      money_tk: '0.00',
      list: [],
      columns: [
        {
          key: 'name',
          title: '用户姓名',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.name)
          },
        },
        {
          key: 'phone',
          title: '用户手机号',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.phone)
          },
        },
        {
          key: 'order_sn',
          title: '订单号',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.order_sn)
          },
        },
        {
          key: 'created_time',
          title: '创建时间',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.created_time)
          },
        },
        {
          key: 'remark',
          title: '流水说明',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.remark)
          },
        },
        {
          key: 'money',
          title: '入账/支出(元)',
          align: 'center',
          render: (h, params) => {
            if (params.row.order_type == 1) {
              return h('strong', { style: { color: '#FD8383' } }, '+' + params.row.money)
            } else {
              return h('strong', { style: { color: '#05A748' } }, '-' + params.row.money)
            }
          },
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginBottom: '5px',
                    marginRight: '5px',
                    border: 'none',
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF'
                  },
                  on: {
                    click: () => {
                      this.editRemark(params.row)
                    },
                  },
                },
                '编辑流水说明',
              ),
            ])
          },
        },
      ],
      loading: true,
      pagenation: {},
      show_remark: false,
      remark: '',
      cur_obj: {},
      filter: {
        created_at_range_hz: '',
        created_at_range: '',
        page: 0,
        page_size: 20,
      },
      created_at_hz: '',
      created_at: ''
    }
  },
  watch: {
    'created_at_hz': function () {
      let created_at_start = Time.dateToTimestamp(this.created_at_hz[0])
      let created_at_end = Time.dateToTimestamp(this.created_at_hz[1])
      if (created_at_start !== 0 && created_at_end !== 0) {
        this.filter.created_at_range_hz = created_at_start + '-' + created_at_end
      } else {
        this.filter.created_at_range_hz = ''
      }
    },
    'created_at': function () {
      let created_at_start = Time.dateToTimestamp(this.created_at[0])
      let created_at_end = Time.dateToTimestamp(this.created_at[1])
      if (created_at_start !== 0 && created_at_end !== 0) {
        this.filter.created_at_range = created_at_start + '-' + created_at_end
      } else {
        this.filter.created_at_range = ''
      }
    },
  },
  methods: {
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.initOrderRecord()
    },
    changePageSize (page_size) {
      this.loading = true
      this.filter.page_size = page_size
      this.initOrderRecord()
    },
    search: function () {
      this.filter.page = 0
      this.initOrderRecord()
    },
    editRemark (item) {
      let _this = this
      _this.cur_obj = item
      _this.remark = item.remark
      _this.show_remark = true
    },
    submitRemark () {
      let _this = this
      if (_this.remark == '') {
        _this.$Message.error('请输入说明内容'); return;
      }
      let obj = {}
      obj.id = _this.cur_obj.id
      obj.remark = _this.remark
      editRemark(obj).then(res => {
        if (res.code == 0) {
          _this.cur_obj.remark = _this.remark
          _this.show_remark = false
          _this.$Message.success('操作成功');
        } else {
          _this.$Message.error(res.text);
        }
      })
    },
    initFinceInfo () {
      let _this = this
      financeInfo(_this.filter).then(res => {
        if (res.code == 0) {
          _this.money_all = res.data.money_all
          _this.money_djs = res.data.money_djs
          _this.money_yjs = res.data.money_yjs
          _this.money_tk = res.data.money_tk
        } else {
          this.$Message.error(res.text)
        }
      })
    },
    initOrderRecord () {
      let _this = this
      orderRecord(_this.filter).then(res => {
        if (res.code == 0) {
          _this.list = res.data
          _this.loading = false
          _this.pagenation.currentPage = parseInt(res.currentPage) + 1
          _this.pagenation.totalPage = parseInt(res.totalPage)
          _this.pagenation.perPage = parseInt(res.perPage)
        } else {
          _this.loading = false
          _this.$Message.error(res.text)
        }
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter.page = 0
      _this.filter.page_size = 500
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      orderRecord(this.filter).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter.page++
            _this.export()
          } else {
            _this.filter.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['用户姓名', '用户手机号', '订单号', '创建时间', '流水说明', '入账/支出(元)'];
            const filterVal = ['name', 'phone', 'order_sn', 'created_time', 'remark', 'moneys'];
            const data = _this.formatJson(filterVal, _this.export_list)
            export_json_to_excel(tHeader, data, '账单明细')
          }
        }
      })
    }
  },
  mounted () {
    this.initFinceInfo()
    this.initOrderRecord()
  },
}
</script>

<style lang="less" scoped>
.download-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-top: 20px;
	.download-pic {
		width: 430px;
		height: 600px;
		img {
			width: 100%;
			height: 100%;
			-o-object-fit: contain;
			object-fit: contain;
		}
	}
	.download-tip {
		margin-left: 30px;
		p {
			font-size: 16px;
			color: #666;
			line-height: 30px;
		}
	}
}
/deep/ input::-webkit-input-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
}
/deep/ input::-moz-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
}
/deep/ input:-moz-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
}
/deep/ input:-ms-input-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
}
.certificate_text {
	color: #353535;
	font-size: 15px;
	margin-bottom: 20px;
}
.certificate_upload {
	.no_pic {
		width: 150px;
		height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f7f8f9;
	}
}
.cash_text {
	font-size: 14px;
	position: relative;
	padding-right: 8px;
	margin-right: 8px;
	&:after {
		position: absolute;
		content: '*';
		color: red;
		display: block;
		right: 0;
		top: 0;
		font-size: 16px;
	}
}
.label_required21 {
	.c4,
	.ivu-form-item-label {
		position: relative;
		&:after {
			position: absolute;
			content: '*';
			color: red;
			display: block;
			right: 15px;
			top: 0;
			font-size: 16px;
		}
	}
	.c4 {
		&:after {
			right: -10px;
		}
	}
}
</style>
<style lang="less">
@import '../../../src/index.less';
.fade-enter-active,
.fade-leave-active {
	transition: opacity 1s;
}
.fade-enter,
.fade-to {
	opacity: 0;
}
.cash_out {
	.ivu-radio-wrapper {
		height: unset !important;
		line-height: unset !important;
		margin-bottom: 35px;
	}
	.ivu-radio {
		vertical-align: super;
		margin-right: 10px;
	}
	.cash_wrapper {
		width: 90%;
		margin: 0 auto;
	}
	.way {
		color: #353535;
		font-size: 15px;
		margin: 45px 0 23px 0;
	}
	.c3 {
		margin-left: 28px;
		margin-top: 8px;
		margin-bottom: 12px;
		position: relative;
		height: 32px;
		width: 500px;
		.c4 {
			font-size: 14px;
			display: inline-block;
		}
		.c5 {
			position: absolute;
			left: 58px;
		}
	}
	.c0 {
		.clearfix;
		display: inline-block;
		.c1 {
			width: 28px;
			height: 28px;
			float: left;
			margin-right: 10px;
		}
		.c2 {
			float: left;
			color: #353535;
			font-size: 14px;
			line-height: 28px;
		}
	}
}
.finance_money {
	background: #fff;
	width: 100%;
	padding: 18px;
	.fm {
		background: #f5f7fa;
		.clearfix;
		.fm_wrap {
			width: 23.5%;
			margin-right: 2%;
			float: left;
			padding-left: 39px;
			padding-top: 10px;
			padding-bottom: 18px;
			position: relative;
			height: 142px;
			&:after {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1px;
				height: 97px;
				display: block;
				content: '';
				background: #eeeeee;
			}
			.fm_text {
				color: #333333;
				font-size: 18px;
				margin: 5px 0;
			}
			.fm_btns {
				margin-top: 15px;
			}
			.ivu-btn {
				&:focus {
					box-shadow: none;
				}
			}
			.record_btn {
				font-size: 14px;
				background: transparent;
				border-color: transparent;
				color: #2b76ee;
				margin-left: 5px;
				transition: 0.2s;
				&:hover {
					opacity: 0.9;
				}
			}
			&:last-of-type {
				margin-right: 0;
				&:after {
					width: 0;
				}
			}
		}
	}
}
.finance_tips_wrapper {
	position: absolute;
	left: 153px;
	top: 19px;
	.ivu-icon {
		padding-bottom: 8px;
	}
	&:hover {
		.finance_tips {
			opacity: 1;
			visibility: visible;
		}
	}
	.finance_tips {
		opacity: 0;
		transition: 0.3s;
		position: absolute;
		background: #fff;
		padding: 5px 10px;
		line-height: 22px;
		border-radius: 5px;
		box-shadow: 0 0 7px rgba(218, 218, 218, 0.5);
		width: 216px;
		height: auto;
		left: -99px;
		top: 33px;
		z-index: 9;
		visibility: hidden;
		&:after {
			position: absolute;
			display: inline-block;
			top: -5px;
			left: 50%;
			transform: translateX(-50%) rotate(-45deg);
			width: 0;
			height: 0;
			content: '';
			border-style: solid;
			border-width: 7px;
			border-color: #fff #fff transparent transparent;
			box-shadow: 2px -2px 2px rgba(218, 218, 218, 0.5);
		}
	}
}
</style>
